<!--
    group: 企业管理
    name: 设立企业模式
    url: /enterprise/addServiceMode
-->
<template>
  <div>
    <!--  主体部分  -->
    <div class="main_content">
      <h3><span class="icons"></span>请选择企业服务模式</h3>

      <template v-if="list.length > 0">
        <div class="item_content" v-for="item in list" :key="item.id" :class="{ active: item.id == isActive }">
          <div class="item_header">
            <h3>{{ item.svModelName }}</h3>
            <a-button v-if="isActive != item.id" type="primary" @click="activeItem(item.id,item)">选择</a-button>
            <a-button v-if="isActive == item.id" type="link">已选择</a-button>
          </div>
          <div class="item_bottom">
            <detail-list title="" :col="1" class="detail-layout">
              <detail-list-item term="服务模式说明：">{{ item.svModelDesc }}</detail-list-item>
            </detail-list>
            <detail-list v-if="item.servicefeeList.length > 0" title="" :col="3" class="detail-layout">
              <detail-list-item term="注册服务费：">{{ scalerPrice(item.servicefeeList[0].svRegistPrice) }}</detail-list-item>
              <detail-list-item term="开户服务费：">{{ scalerPrice(item.servicefeeList[0].svBankPrice) }}</detail-list-item>
              <detail-list-item term="税务变更费：">{{ scalerPrice(item.servicefeeList[0].svTaxPrice) }}</detail-list-item>
              <detail-list-item term="服务年费：">{{ scalerPrice(item.servicefeeList[0].svYearPrice) }}</detail-list-item>
              <detail-list-item term="工商变更费：">{{ scalerPrice(item.servicefeeList[0].svBusinessPrice) }}</detail-list-item>
              <detail-list-item term="企业注销费："> {{ scalerPrice(item.servicefeeList[0].svCanclePrice) + '起'}} </detail-list-item>
<!--              <detail-list-item term="企业注销费：">200起</detail-list-item>-->
            </detail-list>
            <detail-list title="" :col="1" class="detail-layout">
              <detail-list-item term="月开票额度限制：">
                {{ scalerPrice(item.invoiceMin)}}
                <i class="iconfont icon-xiaoyudengyu"></i>
                {{ scalerPrice(item.invoiceMax) }}
              </detail-list-item>
              <detail-list-item term="服务费模式：">
                <!--费率：1固定费率；2阶梯费率,3累计阶梯-->
                {{
                  item.rateType == 1 ? '固定费率' :
                    item.rateType == 2 ? '阶梯费率' :
                      item.rateType == 3 ? '累计阶梯' : ''
                }}
              </detail-list-item>
              <detail-list-item term="服务费率：" v-if="item.rateType == 1">{{ scalerSign(item.servicerateList[0].rate) }}%</detail-list-item>
              <detail-list-item term="服务费率：" v-else>
                <div v-if="item.servicerateList.length > 0">
                  <div v-for="jery in item.servicerateList">
                    <span>
                      {{ scalerPrice(jery.min) }}
                      <i class="iconfont icon-xiaoyuhao"></i>
                      开票金额
                      <i class="iconfont icon-xiaoyudengyu"></i>
                      {{ scalerPrice(jery.max) }}
                      元，
                    </span>
                    服务费率： {{ scalerSign(jery.rate)}}%
                  </div>
                </div>
              </detail-list-item>

            </detail-list>
          </div>
        </div>
      </template>

      <div class="main_footer">
        <a-button type="primary" class="btnsLarge" @click="nextStep">下一步</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
import { getChannelSvConf,getEntInfo } from '@/api/enterprise'
import { conversionElement,percentConversion,cloneObject,Storage } from '@/utils/util'
export default {
  name: 'addServiceMode',
  components:{
    DetailList,
    DetailListItem,
  },
  data(){
    return{
      isActive: 1,  //可选择选项  个体工商户
      list: [],
      selectItemInfo:{},
      form: {
        bankFlag: 0,   //服务费
        registerType: null,  //企业类型
        protocolType:'',// 企业所属合作模式
      }
    }
  },
  created() {
    if (this.$route.query.registerType){
      // this.form.bankFlag = this.$route.query.bankStatus;
      this.form.registerType = this.$route.query.registerType;
      this.form.protocolType = this.$route.query.protocolType;
    }
  },
  mounted() {
    this.getRegistrationMode();
  },
  methods:{
    //切换
    activeItem(index,item){
      this.isActive = index;
      this.selectItemInfo = item
    },
    //下一步
    nextStep(){
      Storage.set('serviceConfItemInfo',this.selectItemInfo )
      this.$router.push({
        path: '/enterprise/establishEnterprise',
        query:{
          serviceConfId: this.isActive,  //企业服务模式
          registerType: this.form.registerType,  //注册类型
          protocolType: this.form.protocolType // 企业所属合作模式
        }
      })

    },
    //获取列表
    getRegistrationMode(){
      getChannelSvConf().then(res => {
        if (res.success){
          if (res.result){
            this.list = res.result || [];
            this.isActive = this.list[0].id;
            this.selectItemInfo = this.list[0]
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //分转元
    scalerPrice(money){
      let tempNum = money
      if(this.$IS.isNullOrUnDef(tempNum) || this.$IS.isEmpty(tempNum)){
        tempNum = 0
      }
      return conversionElement(tempNum);
    },
    //百分比转换    0.6 => 60%
    scalerSign(num){
      let tempNum = num
      if(this.$IS.isNullOrUnDef(tempNum) || this.$IS.isEmpty(tempNum)){
        tempNum = 0
      }
      return percentConversion(tempNum);
    }
  }
}
</script>

<style scoped lang="less">
.main_content{
  width: 100%;
  padding: 30px 44px;
}
h3{
  font-weight: bolder;
  color: @color-smudge;
}

.item_content{
  width: 100%;
  padding: 10px 23px;
  border-radius: 10px;
  border: 1px solid rgba(187, 187, 187, 1);
  margin-top: 20px;

  .item_header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item_bottom{
    width: 100%;
    padding-top: 20px;
  }
}

.active{
  border: 1px solid #4266E5;
}
</style>

